/* Layout and basic styling */
body, html {
    padding: 0;
    margin: 0;
    font-family: Arial, sans-serif;
    box-sizing: border-box; /* Ensures padding does not affect the total width and height */
}

*, *:before, *:after {
    box-sizing: inherit; /* Inherits box-sizing from html */
}

.container {
    display: flex;
    height: 100vh;
}

.sidebar {
    flex: 0 0 250px; /* Flex-grow, Flex-shrink, Flex-basis - Locks the width of the sidebar */
    background-color: #333;
    color: #fff;
    height: 100vh;
    overflow: auto;
}

    .sidebar nav ul {
        list-style: none;
        padding: 0;
    }

        .sidebar nav ul li a {
            display: block;
            padding: 10px;
            color: white;
            text-decoration: none;
        }

            .sidebar nav ul li a:hover,
            .sidebar nav ul li a:focus {
                background-color: #555;
            }

.content {
    flex-grow: 1;
    flex-shrink: 1; /* Allows the content area to shrink if necessary */
    padding: 0px;
    background-color: #fff9e7;
    overflow-y: auto; /* Ensures scrollability */
    width: auto; /* Takes the remaining space */
}
